<template>
  <div style="width:900px;margin:0 auto;">
    1、数据源 <Select v-model="datasource.id" style="width:200px;margin-right: 20px;" placeholder="请先选择一个数据源">
      <Option v-for="item in datasource.list" :key="item.id" :value="item.id">{{ item.name }}</Option>
    </Select>
    <span v-if="database.isShow">数据库 </span>
    <Select v-if="database.isShow" v-model="database.name" style="width:200px;margin-right: 20px;" placeholder="选择数据库">
      <Option v-for="(item, index) in database.list" :key="index" :value="item">{{item}}</Option>
    </Select>

    <div style="height:450px;margin: 20px auto">
      <div style="float:left">
        <div style="width:300px;">
          <Divider size="small">2、选择一张表</Divider>
        </div>
        <ul class="box even">
          <li v-for="item in tables" :key="item.tableName"><span class="right">
              <div class="notTooLong">{{ item.comment }}</div> &nbsp;&nbsp;<a href="javascript:void(9);" @click="selectedTableName = item.tableName">选择</a>
            </span>{{ item.tableName }}</li>
        </ul>
      </div>
      <img style="float:left;margin:180px 20px 0 20px" src="" />
      <div style="float:left">
        <div style="width:300px;">
          <Divider size="small">3、选择<span v-if="selectedTableName">表 [{{selectedTableName}}] 的</span>{{isSingleSelect ? '一个' : ''}}字段</Divider>
        </div>
        <ul class="box odd" style="margin-bottom:10px">
          <li v-for="item in fields" :key="item.name">
            <label>
              <input type="checkbox" v-model="item.checked" />&nbsp;
              <span class="right notTooLong">{{ item.comment }}</span>{{ item.name }}: <span style="color:lightgray">{{item.type}}</span>
            </label>
          </li>
        </ul>

        <a v-if="!isSingleSelect" @click="selectAllField" style="padding-top:10px;">全选</a> <!-- | <a href="#" @click="getSelected">Test</a> -->
      </div>
    </div>
  </div>
</template>
<script lang="ts" src="./index.ts"></script>

<style lang="less" scoped>
.notTooLong {
  display: inline-block;
  color: gray;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 190px;
  white-space: nowrap;
  vertical-align: middle;
}
.box {
  width: 400px;
  height: 400px;
  // margin: 30px 0;
  border: 1px solid lightgray;
  overflow-x: auto;

  li {
    list-style: none;
    padding: 5px 15px;
    // background-color: #e3e3e3;
    &:hover {
      color: black;
    }
    span.right {
      float: right;
    }
    label {
      cursor: pointer;
    }
  }
}

.box.even {
  li:nth-child(even) {
    background-color: #f0f0f0;
  }
}
.box.odd {
  li:nth-child(odd) {
    background-color: #f0f0f0;
  }
}
</style>